import React, { useState } from 'react'
import { Button } from 'antd-mobile'
import { FireFill } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
export default function Campus() {
  let navigate = useNavigate()
  let [num,setNum] = useState(0||localStorage.getItem('num'))
  let distance = 0||localStorage.getItem('distance')
  return (
    <div style={{ textAlign: 'center' }}>
      <div style={{ display: 'flex', padding: '10px', alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <h2>校园跑</h2>
        </div>
        <div>
          <p>跑步设置</p>
        </div>
      </div>
      <div style={{ height: '60vh', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
        <div style={{padding:'15px',border:'6px solid rgb(245, 245, 245)', borderRadius: '50%'}}>
          <div style={{ width: '8rem', height: '8rem', backgroundColor: 'rgb(245, 245, 245)', borderRadius: '50%', padding: '20px' }}>
            <p style={{margin:'20px 0'}}>累计跑量(公里/km)</p>
            <h1 style={{margin:'10px 0',color:'rgb(36, 200, 116)'}}>{distance/1000}</h1>
            <p>跑步次数:{num}</p>
          </div>
        </div>
      </div>
      <div style={{ width: '12.5rem', margin: '0 auto' }}>
        <Button block shape='rounded' color='success' onClick={()=>{
          navigate('/schoolrun')
          setNum(num++)
          console.log(num);
          localStorage.setItem('num',num)
        }}>
          <FireFill/>开始跑步
        </Button>
      </div>
    </div>
  )
}
